<template>
	<view class="container">
		<view class="v-header">
			<view class="v-header-item" :class="datas.TabIndex == 1 ? 'v-header-item-active' : ''" @click="nav(1)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.QB }}</view>
				<view class="v-header-item-title">全部</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 2 ? 'v-header-item-active' : ''" @click="nav(2)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.ZT }}</view>
				<view class="v-header-item-title">直推</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 3 ? 'v-header-item-active' : ''" @click="nav(3)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.SX }}</view>
				<view class="v-header-item-title">伞下</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 4 ? 'v-header-item-active' : ''" @click="nav(4)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.HY }}</view>
				<view class="v-header-item-title">活跃</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 5 ? 'v-header-item-active' : ''" @click="nav(5)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.JT }}</view>
				<view class="v-header-item-title">静态</view>
			</view>
		</view>

		<view class="v-conent">
			<view class="v-item" v-for="(item, index) in datas.MemberStatisticInfos">
				<view class="v-top">
					<image :src="item.ICon" mode="aspectFit"></image>
					<view class="v-item-nickname">{{ item.UserInfo.NickName }}</view>
					<view class="v-item-createtime">{{ item.UserInfo.CreateTime }}</view>
				</view>
				<view class="v-contents">
					<view class="v-item-group">
						<view class="v-item-left">Tel：{{ item.UserInfo.Account }}</view>
						<view class="v-item-right">推荐人：{{ item.UserInfo.ParentName }}</view>
					</view>
					<view class="v-item-group">
						<view class="v-item-left">今日收益：{{ item.LJSY_JR }}</view>
						<view class="v-item-right">累计收益(周)：{{ item.LJSY_BZ }}</view>
					</view>
					<view class="v-item-op">
						<view class="v-item-op-detail" @click="viewTeamDetail(item)">团队明细</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
export default {
	data() {
		return {
			messageText: '',
			msgType: 'success',
			duration: 2000,

			datas: {
				UserId: '',
				TabIndex: 1,
				StatisticInfo: { QB: 0, ZT: 0, SX: 0, HY: 0, JT: 0 },
				MemberStatisticInfos: [
					// {
					// 	Id: '00000-0000-00-000',
					// 	Account: '18653262913',
					// 	NickName: '哈哈',
					// 	ICon: '../../static/bj.png',
					// 	CreateTime: '2024-02-23 15:32',
					// 	ZTR: '许七明',
					// 	JRSY: 2356.23,
					// 	LJSY: 2356.34
					// },
				]
			}
		};
	},
	methods: {
		viewTeamDetail: function (item) {
			let _this = this;
			console.log(_this.datas.UserId)
			if (item.UserInfo.Id != _this.datas.UserId) {
				uni.navigateTo({
					url: `/pages/sys/my-team?UserId=${item.UserInfo.Id}`
				});
			}
		},
		nav: function (index) {
			let _this = this;
			_this.datas.TabIndex = index;

			//正式代码
			var authToken = authTokenUtil();
			var queryData = {
				MemberType: _this.datas.TabIndex,
				UserId: _this.datas.UserId
			};
			uni.request({
				url: _this.sysInfo.BasePath + 'Sys/GetMyTeamInfo',
				method: 'POST',
				data: queryData,
				header: {
					'content-type': 'application/json',
					Authorization: `${authToken}`
				},
				success: (res) => {
					if (res && res.data && res.data.Succeeded === true) {
						console.log(res);
						_this.datas.MemberStatisticInfos = res.data.Data.Members;
						_this.datas.StatisticInfo.QB = res.data.Data.QB;
						_this.datas.StatisticInfo.ZT = res.data.Data.ZT;
						_this.datas.StatisticInfo.SX = res.data.Data.SX;
						_this.datas.StatisticInfo.HY = res.data.Data.HY;
						_this.datas.StatisticInfo.JT = res.data.Data.JT;
					} else {
						_this.sysUtils.tip({
							sender: _this,

							title: '加载我的团队信息失败！',
							icon: 'error'
						});
					}
				},
				fail: () => {
					_this.sysUtils.tip({
						sender: _this,
						title: '加载我的团队信息失败！',
						icon: 'error'
					});
				},
				complete: () => {}
			});
		},
		init: function () {
			let _this = this;
			console.log('init');
			_this.nav(1);
		}
	},
	onShow() {
		let _this = this;
		// _this.init();
	},
	onLoad(options) {
		let _this = this;
		_this.datas.UserId = options.UserId;

		_this.init();
		// options 包含了查询参数
		console.log(_this.datas.UserId);
	},
	created() {
		let _this = this;
		validLoginToken(null, () => {
			uni.reLaunch({
				url: "/pages/account/login"
			})
		})
	}
};
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	/* background-color: #f0f0f0; */
}
.v-header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	box-sizing: border-box;
	font-size: 26rpx;
	background-color: #fff;
	height: 130rpx !important;
	color: #333;
	position: fixed;
	top: var(--window-top);
	left: 0;
	width: 100%;
	z-index: 10001;
}
.v-header-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	flex: 1;
	padding: 30rpx;
	box-sizing: border-box;
}
.v-header-item-active {
	border-bottom: 2px solid #c93a00ff;
	color: #c93a00ff;
}
.v-header-item-count {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	font-size: 32rpx;
	font-weight: bold;
}
.v-header-item-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	font-size: 26rpx;
}
.v-conent {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: 150rpx;
	padding: 20rpx;
	box-sizing: border-box;
}
.v-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	background-color: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0rpx 5rpx 10rpx #999;
}
.v-top {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	height: 50rpx;
}
.v-top image {
	height: 40rpx;
	width: 40rpx;
	margin-right: 20rpx;
}
.v-item-nickname {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	flex: 1;
	font-weight: bold;
	font-size: 32rpx;
}
.v-item-createtime {
	font-size: 26rpx;
}
.v-contents {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	margin-top: 30rpx;
}
.v-item-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	font-size: 26rpx;
	height: 50rpx;
}

.v-item-group {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	font-size: 26rpx;
	color: #333;
	height: 60rpx;
}
.v-item-left {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	flex: 1;
}
.v-item-right {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	flex: 1;
}
.v-item-op {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin-top: 10rpx;
}
.v-item-op-detail {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #c93a00ff;
	border-radius: 50rpx;
	height: 62rpx;
	width: 180rpx;
	font-size: 26rpx;
	color: #fff;
}
</style>
